<template>
  <div class="homeMain">
    <el-scrollbar>
      <div class="layout">
        <MainHeader />
        <MainBody style="position: relative; top: 10px" :course-list="courseList" :carousel-list="carouselList"
          :loading="loading" />
        <MainFooter />
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import MainBody from '../components/MainBody.vue'
import MainFooter from '../components/MainFooter.vue'
import MainHeader from '../components/MainHeader.vue'
import request from '@/API/request'
import { Message } from 'element-ui'
export default {
  components: {
    MainHeader,
    MainBody,
    MainFooter,
  },
  data() {
    return {
      image: '',
      courseList: [],
      carouselList: [],
      loading: false,
    }
  },
  mounted() {
    // if (this.$store.state.isLogin) {
    //   this.image = this.$store.state.userInfo.avatar
    // } else {
    //   this.image =
    //     'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    // }
    this.loading = true
    request
      .get('/route/recommend')
      .then((res) => {
        if (res.data.code === 200) {
          this.loading = false
          this.courseList = res.data.data
        } else {
          Message({
            message: res.data.msg,
            type: 'error',
            customClass: 'message-global',
          })
        }
      })
      .catch((err) => {
        Message({
          message: err,
          type: 'error',
          customClass: 'message-global',
        })
      })
    request
      .get('/route/carousel')
      .then((res) => {
        if (res.data.code === 200) {
          this.carouselList = res.data.data
        } else {
          Message({
            message: res.data.msg,
            type: 'error',
            customClass: 'message-global',
          })
        }
      })
      .catch((err) => {
        Message({
          message: err,
          type: 'error',
          customClass: 'message-global',
        })
      })
    this.loading = false
  },
}
</script>

<style scoped>
.MainHeader {
  height: 200px;
}

/* .el-main{
      background-color: #fff;
      height: 800px;
    } */

.layout {
  max-height: 900px;
}

.homeMain {
  width: 100%;
  height: 100%;
}

.el-scrollbar {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

:deep .el-scrollbar__wrap {
  height: 100%;
  overflow: scroll;
  overflow-x: auto;
}
</style>